<!-- eslint-disable no-return-assign -->
<template>
  <div class="params-container">
    <breadCrumb title="参数查询"></breadCrumb>

    <el-card>
      <el-alert title="注意: 只允许为第三级分类设置相关参数" class="el-icon-warning" style="margin-bottom: 20px;" type="warning">
      </el-alert>
      <div class="block">
        <span class="demonstration" style="padding-right: 10px;">选择商品分类:</span>
        <el-cascader v-model="value" :options="options" @change="handleChange"
          :props="{ label: 'cat_name', value: 'cat_id' }" clearable>
        </el-cascader>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="first">
            <my-tabs :sel.sync="sel" ref="myTabs1" @editParams="editParams" @addParams="addParams" :list="list" @handleClose="handleClose" @handleInputConfirm="handleInputConfirm" @showInput="showInput">
              <template v-slot="{row}">
                <el-button type="primary" class="el-icon-edit" size="mini" @click="doEdit(row)">编辑</el-button>
                <el-button class="el-icon-delete" size="mini" type="danger" @click="doDel(row)">删除</el-button>
              </template>
            </my-tabs>
          </el-tab-pane>
          <el-tab-pane label="静态属性" name="second">
            <my-tabs :sel.sync="sel" ref="myTabs" @editParams="editParams" @addParams="addParams" :list="list" @handleClose="handleClose" @handleInputConfirm="handleInputConfirm" @showInput="showInput">
              <template v-slot="{row}">
                <el-button type="primary" class="el-icon-edit" size="mini" @click="doEdit(row)">编辑</el-button>
                <el-button class="el-icon-delete" size="mini" type="danger" @click="doDel(row)">删除</el-button>
              </template>
            </my-tabs>
          </el-tab-pane>
        </el-tabs>

      </div>
    </el-card>
  </div>
</template>

<script>
import MyTabs from '../modules/myTabs.vue'
import { getCategories, getParamsCategories, putAttributes, delCategories } from '@/api/goods'
export default {
  name: 'ShoppingParams',
  components: {
    MyTabs
  },
  data () {
    return {
      options: [],
      value: [],
      activeName: 'first',
      list: [],
      sel: 'many'
    }
  },
  async created () {
    // 获取el-cascader三级选项列表
    const res = await getCategories()
    this.options = res.data
  },

  methods: {
    // 编辑动态参数
    doEdit (row) {
      if (this.sel === 'many') {
        this.$refs.myTabs1.dialogVisible = true
        this.$refs.myTabs1.isEdit = false
        this.$refs.myTabs1.formData = { ...row }
      } else {
        this.$refs.myTabs.dialogVisible = true
        this.$refs.myTabs.isEdit = false
        this.$refs.myTabs.formData = { ...row }
      }
    },
    editParams (data) {
      const a = this.list.filter(item => item.attr_id === data.attr_id)
      a[0].attr_name = data.attr_name
    },
    // 删除参数
    async doDel (row) {
      console.log(row)
      this.list = this.list.filter(item => item.attr_id !== row.attr_id)
      await delCategories(row)
    },
    // 添加参数
    addParams (data) {
      this.list.push(data)
    },
    // 点击tag切换input框
    showInput (row) {
      console.log(row, 'row')
      row.inputVisible = true
      // this.$set(row, 'inputVisible', true)
      console.log(row.inputVisible)
      // console.log(this.$refs.myTabs)
      this.sel === 'many' ? this.$refs.myTabs1.aaa() : this.$refs.myTabs.aaa()
    },
    // 回车 失去焦点 提交添加
    async handleInputConfirm (row) {
      const inputValue = row.inputValue
      if (inputValue) {
        // this.dynamicTags.push(inputValue)
        const a = row.attr_vals.split(' ')
        a.push(inputValue)
        console.log(a, 'aaaaa')
        if (a[0] === '') {
          a.shift()
        }
        row.attr_vals = a.join(' ')
        console.log(row)
        await putAttributes(row)
        console.log('添加数据', inputValue)
      }
      row.inputVisible = false
      row.inputValue = ''
    },
    // 修改 删除 tag 标签
    async handleClose (index, data) {
      console.log(this.list, index, data, '----------')
      const obj = this.list.find(item => item.attr_id === data.attr_id)
      const a = obj.attr_vals.split(' ')
      a.splice(index, 1)
      obj.attr_vals = a.join(' ')
      console.log(obj.attr_vals)
      console.log(obj, 'obj')
      const res = await putAttributes(obj)
      console.log(res)
      // put 修改 tag 标签
    },
    handleClick (tab) {
      // console.log(typeof tab.index)
      this.sel = +tab.index ? 'only' : 'many'

      this.handleChange()
    },
    async handleChange () {
      // console.log(this.value, 'this.value')
      if (this.value.length !== 3) {
        this.value = []
        // console.log('走这里面了')
        // this.$refs.myTabs.disabled = this.$refs.myTabs1.disabled = true
        if (this.sel === 'many') {
          this.$refs.myTabs1.disabled = true
        } else {
          this.$refs.myTabs.disabled = true
        }
        this.list = []
      } else {
        const res = await getParamsCategories(this.value[2], { sel: this.sel })
        if (this.sel === 'many') {
          this.$refs.myTabs1.disabled = false
        } else {
          this.$refs.myTabs.disabled = false
        }

        // console.log(this.$refs.myTabs, '打')
        // this.$set(this.$refs.myTabs, 'disabled', false)
        // const arr = this.value
        // arr.splice(0, 2)
        // const res = await getParamsCategories(arr.join(''), { sel: 'many' })
        console.log(res.data)
        res.data.forEach(item => {
          item.inputVisible = false
          item.inputValue = ''
        })
        this.list = res.data
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
